{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}
    我的网站|首页
{% endblock %}

{% block header_extends %}
    <link rel="stylesheet" href="{% static 'home.css' %}">
    {# 图表 Hcharts CDN #}
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
{% endblock %}

{% block nav_home_active %}active{% endblock %}

{% block content %}
<!--第一行，展示页-->
<div class="header-banner">
    <div class="container">
        <h1>我的博客网站</h1>
        <p>...</p>
        <p>欢迎访问</p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-3 col-sm-offset-1">
            <h3 class="home-content">欢迎访问我的网站，随便看</h3>
        </div>
        <div class="col-xs-12 col-sm-8">
            <!-- 图表容器 DOM -->
            <div id="container"></div>
        </div>
    </div>
    <div class="content-item">
        <h3 class="content-item-title">
            <span class="glyphicon glyphicon-pushpin"></span>
            <span>点击榜</span>
        </h3>
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1 col-sm-3">
                <div class="hot-data">
                    <!-- 今天24小时内的热门博客 -->
                    <h3 class="home-block-title">今日热门点击</h3>
                    <ul>
                        {% for hot_data in today_hot_data %}
                            <li><a href="{% url 'blog_detail' hot_data.object_id %}">{{ hot_data.content_object.title }}</a>({{ hot_data.read_num }})</li>
                        {% empty %}
                            <li>今天暂时没有热门博客</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="col-xs-10 col-sm-3">
                <div class="hot-data">
                    <!-- 昨日的热门博客 -->
                    <h3 class="home-block-title">昨日热门点击</h3>
                    <ul class="list">
                        {% for hot_data in yesterday_hot_data %}
                            <li><a href="{% url 'blog_detail' hot_data.object_id %}">{{ hot_data.content_object.title }}</a>({{ hot_data.read_num }})</li>
                        {% empty %}
                            <li>昨天暂时没有热门博客</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="col-xs-10 col-sm-3">
                <div class="hot-data">
                    <!-- 7天的热门博客 -->
                    <h3 class="home-block-title">7天热门点击</h3>
                    <ul>
                        {% for hot_data in seven_hot_data %}
                            <li><a href="{% url 'blog_detail' hot_data.id %}">{{ hot_data.title }}</a>({{ hot_data.read_num_sum }})</li>
                        {% empty %}
                            <li>昨天暂时没有热门博客</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>

    </div>
    
</div>
    
    
    
    

    <script>
        // 图表配置
        var options = {
            chart: { type: 'line' },
            title: { text: null  },
            xAxis: {
                categories: {{ dates | safe }},   // x 轴分类
                tickmarkPlacement: 'on',
                title: { text: '前7日阅读量变化' }
            },
            yAxis: {
                title: { text: null },
                labels:{ enabled: false },
                gridLineDashStyle: 'Dash',
            },
            series: [{                              // 数据列
                name: '阅读量',                        // 数据列名
                data: {{ read_nums }}                     // 数据
            }],
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: { enabled: false },
            credits: { enabled: false },
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
{% endblock %}